<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Tests — Instance</title>
  <link rel="stylesheet" href="../styles.css" />
</head>

<body>
  <main>
    <h1>Tests — Instance</h1>
    <button class="link-like" data-a11y-dialog-show="my-dialog">
      <!-- Insert a needless span here to make sure delegated clicks work -->
      <span data-testid="inside-span">Open the dialog window</span>
    </button>
  </main>

  <div class="dialog" id="my-dialog" aria-hidden="true" aria-labelledby="my-dialog-title">
    <div class="dialog-overlay" data-a11y-dialog-hide></div>
    <div role="document" class="dialog-content">
      <button data-a11y-dialog-hide class="dialog-close" aria-label="Close this dialog window">&times;</button>

      <h1 id="my-dialog-title">Dialog title</h1>

      <form>
        <label for="email">Email (required)</label>
        <input type="email" name="EMAIL" id="email" placeholder="john.doe@gmail.com" required>
        <button type="submit" name="button">Sign up</button>
      </form>
    </div>
  </div>

  <script src="./a11y-dialog.js"></script>
</body>

</html>
